<template>
  <section>
    <Thumbnails :images="receiptPics" />
    <ImageUpload v-if="showUpload && !isAll && !status"
                 :limit="36 - receiptPics.length"
                 multiple
                 @uploadProgress="uploadProgress"
                 @input="handleInput" />
  </section>
</template>

<script>
import OrderMixin, { STATUS_CODES } from "@/components/order/order.mixin";
import Thumbnails from "@basic/Thumbnails.vue";
import ImageUpload from "@basic/ImageUpload.vue";
export default {
  name: "OrderReceiptPics",
  components: { Thumbnails, ImageUpload },
  mixins: [OrderMixin],
  props: {
    value: Object,
    isAll: [Boolean, Number]
  },
  computed: {
    source () {
      return this.value || {};
    },
    receiptPics () {
      return (this.source?.attachments || [])
        .filter((pic) => pic.type === 1 || pic.type === 5 || pic.type === 6)
        .map((pic) => pic.url);
    },
    showUpload () {
      return (this.order.status === STATUS_CODES.WAIT_RECEIPT);
    },
    status () {
      return (this.order.status === STATUS_CODES.COMPLETED) ? true : false
    }
  },
  methods: {
    handleInput (files) {
      const fileList = files.map((file) => {
        return {
          name: file.name,
          url: file.url
        };
      });
      console.log("Uploaded pics: ", files);
      this.$emit("files", fileList);
    },
    uploadProgress (value) {
      this.$emit('uploadProgress', value)
    }
  }
};
</script>
